import {ref,reactive} from 'vue'
let model = ref<string>('')
let flag =ref<boolean>(false)
let obj = {
    a:1,
    b:1
}
let ceshi = ref('ceshi')
let arr=reactive<number[]>([
    1,2,3,4,5,6,7
])
const changeFlag = ()=>{
    console.log(222)
    flag.value = !flag.value
}
const changeCeshi = (str:string)=>{
    ceshi.value = str
}
const handlContent = (ctx:any)=>{
    console.log(ctx,)
    ctx.emit('on-click',123)
}
for(let i in obj){
    console.log(i)
}
type Props={
    title:string
}
/* 

content ：上下文对象
*/
const Example = (prop:Props,content:any)=>{
    return (
        <div>
            <hr />
            <h3>v-model</h3>
            <p>在tsx中使用 ref定义的变量不能省略.value tsx不会自动解析 </p>
            <input type="text" v-model={model.value} /><span>{model.value}</span>
            <br />
            <h3>v-show</h3>
            <button onClick={changeFlag}>changeFlag</button><span v-show={flag.value}>法外狂徒</span><span v-show={!flag.value}>张三</span>
            <br />
            <h3>v-if是不支持的</h3>
            <p>可以使用三元表达式代替v-if</p>
            <p>{flag.value ? (<span>法外狂徒</span>):<span>张三</span>}</p>
            <br />
            <h3>v-for也是不支持的</h3>
            <p>使用map</p>
            <ul>
                {
                    arr.map((item)=>{
                        return <li>第{item}条</li>
                    })
                }
            </ul>
            <br />
            <h3>v-bind</h3>
            <p>直接赋值即可</p>
            <p data-index={obj.a}>data-index={obj.a}</p>
            <h3>v-on绑定事件 所有的事件都按照react风格来</h3>
            <p>所有事件有on开头 所有事件名称首字母大写</p>
            <button onClick={changeCeshi.bind(this,'参数')}> {ceshi.value}</button>
            <h3>Props 接受值</h3>
            <p>{prop.title}</p>
            <button onClick={handlContent.bind(this,content)}> 点我啊</button>
        </div>
    )
}

export default Example